<template>
    <el-form :inline="true" class="search-form">
        <el-form-item>
            <selector v-model="params.difficulty" placeholder="请选择题目难度" style="width: 200px;"></selector>
        </el-form-item>
        <el-form-item>
            <el-input v-model="params.title" placeholder="请您输⼊要搜索的题⽬标题" />
        </el-form-item>
        <el-form-item>
            <el-button plain @click="onSearch" :class="{ 'loading': searchLoading }">
                <el-icon v-if="searchLoading" class="is-loading"><Loading /></el-icon>
                <el-icon v-else><Search /></el-icon>
                搜索
            </el-button>
            <el-button plain type="info" @click="onReset" :class="{ 'loading': resetLoading }">
                <el-icon v-if="resetLoading" class="is-loading"><Loading /></el-icon>
                <el-icon v-else><Refresh /></el-icon>
                重置
            </el-button>
            <el-button plain type="primary" @click="onAddQuestion" :class="{ 'loading': addLoading }">
                <el-icon v-if="addLoading" class="is-loading"><Loading /></el-icon>
                <el-icon v-else><Plus /></el-icon>
                添加题⽬
            </el-button>
        </el-form-item>
    </el-form>
    <el-table height="526px" :data="questionList" v-loading="tableLoading">
        <el-table-column prop="questionId" width="180px" label="题⽬id" />
        <el-table-column prop="title" label="题⽬标题" />
        <el-table-column prop="difficulty" label="题⽬难度" width="90px">
            <template #default="{ row }">
                <div v-if="row.difficulty === 0" style="color:#3EC8FF;">简单</div>
                <div v-if="row.difficulty === 1" style="color:#FE7909;">中等</div>
                <div v-if="row.difficulty === 2" style="color:#FD4C40;">困难</div>
            </template>
        </el-table-column>
        <el-table-column prop="createName" label="创建⼈" width="140px" />
        <el-table-column prop="createTime" label="创建时间" width="180px" />
        <el-table-column label="操作" width="100px" fixed="right">
            <template #default="{ row }">
                <el-button type="text" @click="onEdit(row.questionId)">编辑
                </el-button>
                <el-button type="text" class="red" @click="onDelete(row.questionId)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination background size="small" layout="total, sizes, prev, pager, next, jumper" :total="total"  
    v-model:current-page="params.pageNum"
    v-model:page-size="params.pageSize"
    :page-sizes="[1,5, 10, 15, 20]" 
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"/>
    <question-drawer ref="questionEditRef" @success="onSuccess"></question-drawer>
</template>
<script setup>
import { Plus, Search, Refresh, Loading } from "@element-plus/icons-vue"
import Selector from "@/components/QuestionSelector.vue"
import { reactive } from 'vue'
import { getQuestionListService,getQuestionDetailService ,delQuestionService} from "@/apis/question";
import { ref } from "vue";
import QuestionDrawer from "@/components/QuestionDrawer.vue";
import { ElMessage } from "element-plus";

const params= reactive({
    pageNum: 1,
    pageSize: 10,
    difficulty: '',
    title: ''

})
const questionList = ref([])
const total=ref(0)
const searchLoading = ref(false)
const resetLoading = ref(false)
const addLoading = ref(false)
const tableLoading = ref(false)

async function getQuestionList() {
    tableLoading.value = true
    try {
        const result = await getQuestionListService(params);    
        questionList.value = result.rows
        total.value = result.total
    } catch (error) {
        ElMessage.error('获取题目列表失败')
    } finally {
        tableLoading.value = false
    }
}

getQuestionList();
function handleSizeChange(newSize){
    //params.pageSize=newSize
    params.pageNum=1
    getQuestionList()



}
function handleCurrentChange(newPage){
    //params.pageNum=newPage

    getQuestionList()

}
async function onSearch(){
    searchLoading.value = true
    try {
        params.pageNum = 1
        await getQuestionList()
        ElMessage.success('搜索成功')
    } catch (error) {
        ElMessage.error('搜索失败')
    } finally {
        searchLoading.value = false
    }
}
async function onReset(){
    resetLoading.value = true
    try {
        params.pageNum = 1
        params.pageSize = 10
        params.title = ''
        params.difficulty = ''
        await getQuestionList()
        ElMessage.success('重置成功')
    } catch (error) {
        ElMessage.error('重置失败')
    } finally {
        resetLoading.value = false
    }
}
const questionEditRef = ref()
// 添加
const onAddQuestion = () => {
    addLoading.value = true
    try {
        questionEditRef.value.open()
    } finally {
        addLoading.value = false
    }
}
function onSuccess(service) {
  if (service === 'add') {
    params.pageNum = 1
  }
  getQuestionList()
}
async function onEdit(questionId){
    questionEditRef.value.open(questionId);

}
async function onDelete(questionId) {
    await delQuestionService(questionId)
    params.pageNum=1
    getQuestionList()



    
}



</script>
<style lang="scss" scoped>
.search-form {
    margin-bottom: 20px;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    
    .el-form-item {
        margin-bottom: 0;
    }
    
    .el-button {
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        
        &.loading {
            cursor: not-allowed;
            opacity: 0.8;
        }
        
        .el-icon {
            margin-right: 4px;
            
            &.is-loading {
                animation: rotating 2s linear infinite;
            }
        }
    }
}

@keyframes rotating {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

:deep(.el-table) {
    border-radius: 8px;
    overflow: hidden;
    
    .el-table__row {
        transition: all 0.3s ease;
        
        &:hover {
            background-color: #f5f7fa;
        }
    }
}
</style>
